<!DOCTYPE html>
<html lang="en">
<!---
模型操作
1、实现整个的自动居中和自动满屏
2、在多个模型种，选择一个模型进行编辑
a.实现
-->

<head>
  <meta charset="UTF-8">
  <title>cube-oper</title>
  <script type="importmap">
        {
          "imports": {
            "three": "./js/threejs/three.module.js",
            "three/addons/": "./js/jsm/"
          }
        }
    </script>
  <script src="./js/pointUtil.js"></script>
  <!-- <script src="./js/three-scene.js"></script> -->
  <style>
    body {
      margin: 0;
      background-color: #000;
      color: #fff;
      font-family: Monospace;
      font-size: 13px;
      line-height: 24px;
      overscroll-behavior: none;
    }

    canvas {
      display: block;
    }

    #tooltip {
      position: absolute;
      background-color: rgba(0, 0, 0, 0.7);
      color: white;
      padding: 5px;
      border-radius: 5px;
      display: none;
      /* 默认隐藏 */
      pointer-events: none;
      font-size: 12px;
      white-space: break-spaces;
      z-index: 1;
    }
  </style>
</head>

<body>
  <!-- 创建用于显示提示的文本元素 -->
  <div id="container"></div>
  <div id="tooltip" onclick="tooltipCkick"></div>
  <script type="module">
    import * as THREE from "./js/threejs/three.module.js";
    import threeUtil from './js/three-cube.js';

    // 索引数组，定义每个面由哪些顶点构成 (每个面由两个三角形组成)
    const indicesCube = [
      0, 1, 2, 0, 2, 3, // 底面
      4, 6, 5, 4, 7, 6, // 顶面
      0, 4, 5, 0, 5, 1, // 右面
      1, 5, 6, 1, 6, 2, // 前面
      2, 6, 7, 2, 7, 3, // 上面
      3, 7, 4, 3, 4, 0, // 背面
    ];


    var optCubes = [
      { "data": { "id": "101", "type": "L", "name": "L01", "color": "#FF0000" }, "points": [{ "x": 20, "y": 0 }, { "x": 190, "y": 0 }, { "x": 190, "y": 20 }, { "x": 20, "y": 20 }] },
      { "data": { "id": "101", "type": "Z", "name": "L02", "color": "#A52A2A" }, "points": [{ "x": 190, "y": 0 }, { "x": 240, "y": 50 }, { "x": 220, "y": 50 }, { "x": 190, "y": 20 }] },
      { "data": { "id": "101", "type": "L", "name": "L03", "color": "#5F9EA0" }, "points": [{ "x": 220, "y": 50 }, { "x": 240, "y": 50 }, { "x": 240, "y": 150 }, { "x": 220, "y": 150 }] },
      { "data": { "id": "101", "type": "Z", "name": "L04", "color": "#7FFF00" }, "points": [{ "x": 150, "y": 150 }, { "x": 240, "y": 150 }, { "x": 220, "y": 170 }, { "x": 150, "y": 170 }] },
      { "data": { "id": "101", "type": "Z", "name": "Z01", "color": "#6495ED" }, "points": [{ "x": 130, "y": 150 }, { "x": 150, "y": 150 }, { "x": 150, "y": 170 }, { "x": 130, "y": 170 }] },
      { "data": { "id": "101", "type": "L", "name": "L05", "color": "#008B8B" }, "points": [{ "x": 50, "y": 150 }, { "x": 130, "y": 150 }, { "x": 130, "y": 170 }, { "x": 50, "y": 170 }] },
      { "data": { "id": "101", "type": "Z", "name": "L06", "color": "#006400" }, "points": [{ "x": 50, "y": 150 }, { "x": 50, "y": 170 }, { "x": 30, "y": 170 }, { "x": 30, "y": 160 }] },
      { "data": { "id": "101", "type": "L", "name": "L07", "color": "#8B008B" }, "points": [{ "x": 20, "y": 90 }, { "x": 50, "y": 150 }, { "x": 20, "y": 160 }, { "x": 0, "y": 100 }] },
      { "data": { "id": "101", "type": "Z", "name": "L08", "color": "#228B22" }, "points": [{ "x": 0, "y": 20 }, { "x": 20, "y": 0 }, { "x": 20, "y": 90 }, { "x": 0, "y": 100 }] },
      { "data": { "id": "101", "type": "L", "name": "L09", "color": "#FFA500" }, "points": [{ "x": 130, "y": 20 }, { "x": 150, "y": 20 }, { "x": 150, "y": 150 }, { "x": 130, "y": 150 }] },
      { "data": { "id": "101", "type": "DB", "name": "DB1", "color": "#FFA500" }, "points": [{ "x": 70, "y": 70 }, { "x": 90, "y": 70 }, { "x": 90, "y": 110 }, { "x": 70, "y": 110 }] },
      { "data": { "id": "101", "type": "DB", "name": "DB2", "color": "#4B0082" }, "points": [{ "x": 180, "y": 90 }, { "x": 200, "y": 90 }, { "x": 200, "y": 110 }, { "x": 180, "y": 110 }] },
    ];

    let { scene, camera, renderer, container } = threeUtil.initScene();

    var hCubes = []
    var hImgs = []
    var optCube = optCubes[0];
    var iCubeNum = optCubes.length
    var iCubeIdx
    for (iCubeIdx = 0; iCubeIdx < iCubeNum; iCubeIdx++) {
      optCube = optCubes[iCubeIdx];
      threeUtil.addCube(optCube, hCubes, camera,scene)
    }

    threeUtil.regDrag(hCubes, camera,renderer)
  </script>

</body>

</html>